<template>
    <div class="card">
        <div class="card-header">Vue Axios POST - BezKoder.com</div>
        <div class="card-body">
            <div class="form-group">
                <input type="text" class="form-control" ref="post_title" placeholder="Title" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control" ref="post_description" placeholder="Description" />
            </div>
            <div class="form-check">
                <input class="form-check-input" ref="post_published" type="checkbox" v-model="isPublished" id="flexCheckChecked" checked>
                <label class="form-check-label" for="flexCheckChecked">
                    IsPublished
                </label>
            </div>
            <button class="btn btn-sm btn-primary" @click="postData">Post Data</button>
            <button class="btn btn-sm btn-warning ml-2" @click="clearPostOutput">Clear</button>
            <div v-if="postResult" class="alert alert-secondary mt-2" role="alert" style="text-align: left"><pre>{{postResult}}</pre></div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import http from "../http-common"

class Tutorial{
    private readonly id:number = 0;
    private title:string;
    private description:string;
    private published:number;
    constructor (title:string,description:string,published:number) {
        this.title = title;
        this.description = description;
        this.published = published
    }
}

@Component
export default class AxiosPostJSONData extends Vue {
    @Prop() private msg!: string
    private postResult:any = "";
    private isPublished:number = 1;

    $refs! : {
        post_title:HTMLInputElement,
        post_description:HTMLInputElement,
        post_published:HTMLInputElement
    }

    public clearPostOutput(){
        this.postResult = "";
        this.$refs.post_title.value = "";
        this.$refs.post_description.value = "";
    }

    public postData():void{
        let postData = {
            title:this.$refs.post_title.value,
            description:this.$refs.post_description.value,
            published:this.isPublished
        }
        let tutorial:Tutorial = new Tutorial(postData.title,postData.description,postData.published);
        http.post("/api/tutorial",tutorial).then(res =>{
            let result = {
                status:res.status + "-" + res.statusText,
                headers:res.headers,
                data:res.data
            }
            this.postResult = JSON.stringify(result,null,4);
        })
    }

}
</script>

<style scoped>
</style>
